<!DOCTYPE html>
<html>
<head>
<title>Feynman Diagram Fig. 3.22</title>
</head>
<body>
<canvas id="feynmanCanvas" width="550" height="400"></canvas>
<script>
    const canvas = document.getElementById('feynmanCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style ---
    ctx.lineWidth = 2.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = '24px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // --- Coordinates ---
    const v_left = { x: 150, y: 190 };
    const v_right = { x: 370, y: 190 };
    const p_e1_in = { x: 50, y: 90 };
    const p_e2_in = { x: 50, y: 290 };
    const p_f1_out = { x: 470, y: 90 };
    const p_f2_out = { x: 470, y: 290 };

    // --- Drawing functions ---
    function drawArrow(ctx, p1, p2, size) {
        // Draws an arrow in the middle of the line from p1 to p2, pointing towards p2.
        const mid = { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
        const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x);
        ctx.save();
        ctx.translate(mid.x, mid.y);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, -size / 2);
        ctx.moveTo(0, 0);
        ctx.lineTo(-size, size / 2);
        ctx.stroke();
        ctx.restore();
    }

    function drawPhi(ctx, x, y, radius) {
        // Draws the phi symbol (circle with a vertical line).
        ctx.save();
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x, y - radius);
        ctx.lineTo(x, y + radius);
        ctx.stroke();
        ctx.restore();
    }

    // --- Main Drawing Logic ---

    // Outer box
    ctx.strokeRect(20, 50, 510, 270);

    // Fermion lines
    ctx.beginPath();
    // e- in (top)
    ctx.moveTo(p_e1_in.x, p_e1_in.y);
    ctx.lineTo(v_left.x, v_left.y);
    // e- in (bottom)
    ctx.moveTo(p_e2_in.x, p_e2_in.y);
    ctx.lineTo(v_left.x, v_left.y);
    // f out (top)
    ctx.moveTo(v_right.x, v_right.y);
    ctx.lineTo(p_f1_out.x, p_f1_out.y);
    // f-bar out (bottom)
    ctx.moveTo(v_right.x, v_right.y);
    ctx.lineTo(p_f2_out.x, p_f2_out.y);
    ctx.stroke();

    // Arrows
    drawArrow(ctx, p_e1_in, v_left, 12);
    drawArrow(ctx, p_e2_in, v_left, 12);
    drawArrow(ctx, v_right, p_f1_out, 12);
    drawArrow(ctx, v_right, p_f2_out, 12);

    // Propagator (dashed line)
    ctx.save();
    ctx.setLineDash([8, 8]);
    ctx.beginPath();
    ctx.moveTo(v_left.x, v_left.y);
    ctx.lineTo(v_right.x, v_right.y);
    ctx.stroke();
    ctx.restore();

    // --- Labels ---
    // e⁻
    ctx.font = '24px serif';
    ctx.fillText("e⁻", 80, 80);
    ctx.fillText("e⁻", 80, 300);

    // φ(k)
    const phi_pos = {x: 245, y: 165};
    ctx.font = 'italic 24px serif';
    drawPhi(ctx, phi_pos.x, phi_pos.y, 8);
    ctx.fillText("(k)", 290, 165);

    // f and f̄
    ctx.fillText("f", 440, 80);
    const fbar_x = 440;
    const fbar_y = 300;
    ctx.fillText("f", fbar_x, fbar_y);
    const f_metrics = ctx.measureText("f");
    const bar_width = f_metrics.width;
    ctx.beginPath();
    ctx.moveTo(fbar_x - bar_width / 2, fbar_y - 15);
    ctx.lineTo(fbar_x + bar_width / 2, fbar_y - 15);
    ctx.stroke();
    
    // u(p) and v(q)
    ctx.font = '24px serif';
    ctx.fillText("u", 470, 120);
    ctx.fillText("v", 470, 260);
    ctx.font = 'italic 24px serif';
    ctx.fillText("(p)", 495, 120);
    ctx.fillText("(q)", 495, 260);

    // Figure caption
    ctx.font = '22px serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 3.22', 275, 360);

</script>
</body>
</html>